import { useEffect, useRef, useState } from 'react';
// npm 安装
import '@wangeditor/editor/dist/css/style.css';
import {history} from 'umi'
import { Input,Button, message } from 'antd'
import { createEditor, createToolbar, IEditorConfig, IDomEditor, IToolbarConfig } from '@wangeditor/editor';
import styles from './index.less';
import ReactMarkdown from 'react-markdown';
import {addAleApi} from '@/services/ant-design-pro/api';
import gfm from 'remark-gfm';
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
export default function Index() {
    const tolRef = useRef(null);
    const editRef = useRef(null);
    const [str, setStr] = useState('');
    // title
    const [ipt, setIpt] = useState('');
    // html
    const [htmls, setHmlt] = useState('');
    
        useEffect(() => {
        const editorConfig: Partial<IEditorConfig> = {}
        editorConfig.placeholder = '请输入内容';

        editorConfig.onChange = (editor: IDomEditor) => {
            // 当编辑器选区、内容变化时，即触发
            setStr(editor.getText());
            setHmlt(editor.getHtml());
        }
        // 工具栏配置
        const toolbarConfig: Partial<IToolbarConfig> = {}

        // 创建编辑器
        const editor = createEditor({
            selector: editRef.current as any,
            config: editorConfig,
            mode: 'default' // 或 'simple' 参考下文
        })
        // 创建工具栏
        createToolbar({
            editor,
            selector: tolRef.current as any,
            config: toolbarConfig,
            mode: 'default' // 或 'simple' 参考下文
        })
    }, [])
    // input
    const setipt = (e: any) => {
        setIpt(e.target.value);
    }
    // 发布
    const addAle = async ()=>{
        let data = {title:ipt,html:htmls,status:'publish',content:htmls,toc:htmls};
        let res = await addAleApi(data);
       if(res.success){
        message.success('已发布');
        history.push('/form/basic-form')
       }
    }
    return (
        <div className={styles.newPage}>
            {/* 顶部 */}
            <div style={{display:'flex',justifyContent:'space-between'}}>
                <div>
                <Button>X</Button> <Input style={{width:'200px'}} value={ipt} onChange={setipt} ></Input>
                </div>
                <div>
                    <Button type='primary' onClick={addAle}>发布</Button>
                </div>
            </div>
            <div className={styles.downview}>
                {/* 左侧输入 */}
                <div className={styles.leftinp}>
                    {/* toolbar-container */}
                    <div ref={tolRef} className={styles.topbar}>

                    </div>
                    {/* editor-container */}
                    <div ref={editRef} className={styles.editor}>

                    </div>
                </div>
                {/* 右侧渲染 */}
                <div className={styles.right_views}>
                    <ReactMarkdown plugins={[[gfm, { singleTilde: false } ] ]} allowDangerousHtml>
                        {str}
                    </ReactMarkdown>
                </div>
                {/* 大纲 */}
                <div className={styles.right_title}>
                    <MarkNav className="article-menu" source={str} headingTopOffset={80} ordered={false} />
                </div>
            </div>
        </div>
    )
}
